<template>
  <div class="app-container">
    <el-page-header style="margin-bottom: 20px" @back="goBack" :content="id==0?'创建活动':'编辑活动'">
    </el-page-header>
    <el-form :model="data" label-position="left" label-width="150px">
      <el-form-item label="活动名称" required>
        <el-input v-model="data.title" placeholder="活动名称" style="width: 25%"/>
      </el-form-item>
      <el-form-item label="活动开始时间" required>
        <el-date-picker
          v-model="data.begin_time"
          type="date"
          value-format="yyyy-MM-dd"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动结束时间" required>
        <el-date-picker
          v-model="data.end_time"
          type="date"
          value-format="yyyy-MM-dd"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="顶部图片" required>
        <Upload v-model="data.top_pic" :pic_url="data.top_pic"/>
        <p>只支持.jpg.png格式 建议尺寸：750*418</p>
      </el-form-item>
      <el-form-item label="启用集字卡奖项" style="margin-bottom: 30px;" required>
        <el-radio v-model="data.is_collect" :label="1">是</el-radio>
        <el-radio v-model="data.is_collect" :label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="集齐集字卡奖金" required>
        <el-input v-model="data.collect_money" placeholder="" style="width: 25%"/>
        元
        <p>说明：集字卡奖金，须开通微信支付企业付款到零钱功能。</p>
      </el-form-item>

      <el-form-item label="奖品设置" required>
        <p>奖品设置说明： <br>
          1、所有奖品总概率不能超过100%（可以为0%），剩余概率即为“未中奖（谢谢参与）”的概率；<br>
          2、当奖品的库存为空时，其对应的概率将失效，由“未中奖”进行补充；<br>
          3、须添加满8个奖品项，如奖品种类不足，可添加多个“谢谢参与”。</p>
        <el-table :data="prizes" row-key="id" fit highlight-current-row
                  style="width: 100%;margin-top:30px;">
          <el-table-column align="center" label="顺序">
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="图片">
            <template slot-scope="scope">
              <el-image
                style="width: 50px; height:50px"
                :src="scope.row.cover_url"
                :preview-src-list="[scope.row.cover_url]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" label="奖品名称">
            <template slot-scope="scope">
              {{scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="奖品类型">
            <template slot-scope="scope">
              {{ typeShow[scope.row.type]}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="奖品库存">
            <template slot-scope="scope">
              {{ scope.row.total_num}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="已发放">
            <template slot-scope="scope">
              {{ scope.row.status}}
            </template>
          </el-table-column>
          <el-table-column align="center" :label="'中奖概率（共'+p+'%）'">
            <template slot-scope="scope">
              {{ scope.row.probability}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleEdit(scope)">
                编辑
              </el-button>
              <el-button type="danger" size="mini" @click="handleDelete(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button style="margin-top: 5px" icon="el-icon-plus" @click="addPrizes"
                   :disabled="prizes.length==8?true:false">添加奖品({{prizes.length}}/8)
        </el-button>
      </el-form-item>

    </el-form>
    <div style="text-align:right;">
      <el-button type="danger" @click="goBack">取消</el-button>
      <el-button type="primary" @click="confirmForm">保存</el-button>
    </div>

    <el-dialog title="添加奖品" :visible.sync="dialogVisible1">
      <el-form :model="item">
        <el-radio-group v-model="item.type">
          <el-radio :label="2" v-if="data.is_collect==1">集字卡</el-radio>
          <el-radio :label="1">实物奖品</el-radio>
          <el-radio :label="3">谢谢参与</el-radio>
        </el-radio-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="nextAdd">下一步</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="'添加奖品-'+typeShow[item.type]" :visible.sync="dialogVisible2">
      <el-form :model="item">
        <el-form-item label="奖品图片" required>
          <Upload2 v-if="dialogVisible2" v-model="item.cover_url" :pic_url="item.cover_url"/>
          <p>只支持.png格式，建议尺寸120*120</p>
        </el-form-item>
        <el-form-item label="奖品缩略图" required v-if="item.type==2">
          <Upload2 v-if="dialogVisible2" v-model="item.thumb_url" :pic_url="item.thumb_url"/>
          <p>只支持.png格式，建议尺寸40*40</p>
        </el-form-item>
        <el-form-item label="奖品名称" required v-if="item.type!==3">
          <el-input v-model="item.title" placeholder="奖品名称" style="width: 25%"/>
        </el-form-item>
        <el-form-item label="奖品库存" required v-if="item.type!==3">
          <el-input v-model="item.total_num" placeholder="奖品库存" style="width: 25%"/>
        </el-form-item>
        <el-form-item label="抽中概率" required v-if="item.type!==3">
          <el-input v-model="item.probability" placeholder="抽中概率" style="width: 25%"/>
        </el-form-item>
        <el-form-item label="提示语" required v-if="item.type==3">
          <el-input v-model="item.prompt" placeholder="提示语" style="width: 25%"/>
        </el-form-item>
        <el-form-item label="地区控制" required v-if="item.type!==3">
          <el-radio v-model="item.area_control" :label="1">是</el-radio>
          <el-radio v-model="item.area_control" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="地区范围" required v-if="item.type!==3&&item.area_control==1">
          <el-select v-model="item.area_control_level" placeholder="请选择">
            <el-option key="value1" label="市" :value="1"></el-option>
            <el-option key="value2" label="区县" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区数量" required v-if="item.type!==3&&item.area_control==1">
          <el-input v-model="item.area_num" placeholder="地区数量" style="width: 25%"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="addPrize">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Upload from '@/components/Upload/SingleImage'
  import Upload2 from '@/components/Upload/SingleImage2'
  import { addBigWheel, getBigWheel, updateBigWheel } from '../../api/activity'

  const typeShow = {
    1: '实物奖品',
    2: '集字卡',
    3: '谢谢参与'
  }
  export default {
    components: { Upload, Upload2 },
    name: 'activityDetail',
    data() {
      return {
        item: {},
        isEdit: 0,
        p: 0,
        data: {},
        prizes: [],
        dialogVisible1: false,
        dialogVisible2: false,
        typeShow,
        id: this.$route.query.id ? this.$route.query.id : 0
      }
    },
    created() {
      this.getData()
    },
    methods: {
      nextAdd() {
        this.dialogVisible1 = false
        this.dialogVisible2 = true
      },
      addPrize() {
        if (this.isEdit == 0) {
          this.prizes.push(this.item)
          if (this.item.probability) {
            this.p += Number(this.item.probability)
          }
        }
        this.dialogVisible2 = false
      },
      addPrizes() {
        this.item = {}
        this.isEdit = 0
        this.dialogVisible1 = true
      },
      handleEdit(scope) {
        this.item = scope.row
        this.isEdit = 1
        this.dialogVisible2 = true
      },
      handleDelete({ $index, row }) {
        this.prizes.splice($index, 1)
      },
      goBack() {
        this.$router.push({ name: 'Activity' })
      },
      getData() {
        if (this.id) {
          getBigWheel(this.id).then(res => {
            this.data = res.data
            this.prizes = res.data.prizes
            res.data.prizes.forEach((i,v)=>{
              this.p += Number(i.probability);
            })
          })
        } else {
          this.data = {}
        }
      },
      confirmForm() {
        const param = this.data
        param.prizes = JSON.stringify(this.prizes)
        if (this.id === 0) {
          addBigWheel(param).then(res => {
            this.$message.success('新增成功!')
            this.$router.push({ name: 'Activity' })
          })
        } else {
          updateBigWheel(this.id, param).then(res => {
            this.$message.success('修改成功!')
            this.$router.push({ name: 'Activity' })
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>
